<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS( Cascading Style Sheets )---- 元素的显示方式 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/18.2c077020.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="active sidebar-link">01-CSS基本样式和选择器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#层叠样式表" class="sidebar-link">层叠样式表</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#最小影响法则" class="sidebar-link">最小影响法则</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#单位" class="sidebar-link">单位</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#css注释" class="sidebar-link">css注释</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#三种引入方式" class="sidebar-link">三种引入方式</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#元素命名" class="sidebar-link">元素命名</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#选择器" class="sidebar-link">选择器</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html#样式优先级" class="sidebar-link">样式优先级</a></li></ul></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="sidebar-link">14-3D盒阴影和遮罩</a></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-cascading-style-sheets-元素的显示方式"><a href="#css-cascading-style-sheets-元素的显示方式" class="header-anchor">#</a> CSS( Cascading Style Sheets )---- 元素的显示方式</h1> <h2 id="层叠样式表"><a href="#层叠样式表" class="header-anchor">#</a> 层叠样式表</h2> <blockquote><p><strong>层叠:相同的样式名的不同值作用到同一元素的时候,会有样式被覆盖.</strong></p> <p>样式生效会有先后重要的顺序.根据样式优先级,如果优先级一样,后写会覆盖先写的.</p> <p><strong>样式表:元素视觉表现的集合,样式是依附HTML而存在的</strong></p> <p><strong>注意:</strong></p> <p>​				网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式,最终我们看到的也只是网页最上面的一层.</p></blockquote> <h2 id="最小影响法则"><a href="#最小影响法则" class="header-anchor">#</a> 最小影响法则</h2> <blockquote><p>当我们创建一个标签之后,高度为0px,无色无味透明.</p></blockquote> <h2 id="单位"><a href="#单位" class="header-anchor">#</a> 单位</h2> <h3 id="像素px单位"><a href="#像素px单位" class="header-anchor">#</a> 像素px单位</h3> <blockquote><p><strong>屏幕(显示器),实际上是由一个个发光小圆格所显示.</strong></p> <p>并且这个发光原件要能显示这个世界上所有的颜色的话,这个发光原件要有三种颜色,即我们光学三原色红绿蓝.这三个颜色组合在一起,可以表现一个点的颜色,一个点就是一个像素大小.</p> <p>分辨率1920✖1080的,这两个数字就代表屏幕横向1920个像素单位,纵向1080个像素单位.</p> <p>不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰.</p> <p>像素是一个相对单位,同样的300px在不同的显示设备效果不一样.</p></blockquote> <h3 id="百分比单位"><a href="#百分比单位" class="header-anchor">#</a> 百分比单位</h3> <blockquote><p>也可以将属性值设置为相对于父元素属性的百分比</p> <p>设置百分比可以使里面子元素跟父元素的改变而改变</p></blockquote> <h2 id="css注释"><a href="#css注释" class="header-anchor">#</a> css注释</h2> <blockquote><p>注释里面的内容会自动被游览器忽略</p> <p>/*  这是css注释  */</p></blockquote> <h2 id="三种引入方式"><a href="#三种引入方式" class="header-anchor">#</a> 三种引入方式</h2> <h3 id="行内样式"><a href="#行内样式" class="header-anchor">#</a> 行内样式</h3> <blockquote><p><strong>在标签内部通过style属性来设置元素的样式</strong></p> <p>问题:</p> <p>​			1.结构和样式未分离,会影响到代码结构的观察和维护.</p> <p>​			 2.样式只能对一个标签生效.不能统一去设置,当样式改变,必须一个个修改,不方便.</p> <p>​			开发中绝对不要使用内联样式.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div style=<span class="token string">&quot;width: 500px; height: 500px; background-color:pink&quot;</span>&gt;&lt;/div&gt;
<span class="token comment">/*现在我们设置style属性名,里面是我们的属性值.
 里面样式代码的设置格式为：样式名称:样式值.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="内联样式"><a href="#内联样式" class="header-anchor">#</a> 内联样式</h3> <blockquote><p>将样式在head中的style标签里</p> <p>然后通过css选择器来选中元素为其设置各种样式</p> <p>好处:</p> <p>​		同时可以为多个标签设置样式,并且修改时只需修改一处即可全部应用</p> <p>小型项目或者写一些demo小案例的时候使用内联样式,</p> <p>内联样式更方便对样式进行复用</p> <p>mdn</p> <p><strong>问题:</strong></p> <p>​			我们内部样式表只能对一个网页起作用</p> <p>​			它里面的样式不能跨页面进行复用</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;style type=&quot;text/css&quot;&gt;
	div</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token comment">/*元素宽度*/</span>
		<span class="token property">height</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span><span class="token comment">/*元素高度*/</span>
         <span class="token property">padding</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span><span class="token comment">/*内边距*/</span>
         <span class="token property">margin</span><span class="token punctuation">:</span>外边距<span class="token punctuation">;</span><span class="token comment">/*外边距*/</span>
         <span class="token property">background-color</span><span class="token punctuation">:</span>lightgreen<span class="token punctuation">;</span><span class="token comment">/*背景颜色*/</span>
         <span class="token property">color</span><span class="token punctuation">:</span>pink<span class="token comment">/*文字颜色*/</span>
         <span class="token property">font-size</span><span class="token punctuation">:</span>30px<span class="token punctuation">;</span><span class="token comment">/*文字大小*/</span>
        
        <span class="token comment">/*css基本语法:
        	选择器 + 声明块
        		选择器 通过选择器可以选中页面特定的元素
        		声明块  通过声明块为元素设置样式
        				声明块由一个个声明构成
        				声明是一个名值结构
        				一个样式名对应一个样式值,名值之间以:链接,以;结尾*/</span>
	<span class="token punctuation">}</span>
&lt;/style&gt;

&lt;div&gt;洪荒宇宙&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="外联样式"><a href="#外联样式" class="header-anchor">#</a> 外联样式</h3> <blockquote><p>可以将css样式编写到一个外部的css文件中,然后通过link标签来引入外部的css文件.</p> <p>保证了结构和样式的分离,让代码各司其职.让css在不同的页面之间对其进行复用.</p> <ol><li><p>引入式 link标签   		开发中最佳的使用方式</p> <p>​			语法  <link rel="stylesheet" href="1.css"></p></li> <li><p>导入式  @import 必须写在行首 了解一下**</p> <p>​    		语法:  @import url(&quot;./css/2.css&quot;);</p></li></ol> <p>将样式编写到外部的css文件中,可以利用到游览器的缓存机制</p> <p>从而加快网页的加载速度,提升用户的体验</p></blockquote> <h2 id="元素命名"><a href="#元素命名" class="header-anchor">#</a> 元素命名</h2> <p><strong>命名是建立样式与标签的桥梁,</strong></p> <h3 id="id命名"><a href="#id命名" class="header-anchor">#</a> id命名</h3> <blockquote><p>唯一性(页面一个元素名字只能一个id名字,不能出现重复).</p> <p><strong>id命名主要用于大结构框架和js元素控制上.</strong></p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yunmu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="class-类名命名"><a href="#class-类名命名" class="header-anchor">#</a> class(类名命名)</h3> <blockquote><p><strong>可以有多个,重复使用,只是一个分类,只要具有相似的属性的物体都会分到同一个类中.</strong></p> <p><strong>主要用于元素样式的设置.</strong></p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> 

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="命名规范"><a href="#命名规范" class="header-anchor">#</a> 命名规范</h3> <blockquote><p>命名规范</p> <p>1.必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；</p> <p>2.不允许单个字母的选择器出现；</p> <p>3.不允许命名带有广告等英文的单词，例如ad,adv,adver,advertising，已防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。</p> <p>4.下划线 ’ _ ’ 禁止出现在class命名中，全小写,统一使用’-‘连字符.</p> <p>5.禁止驼峰命名 className</p> <p>6.见名知意</p></blockquote> <h2 id="选择器"><a href="#选择器" class="header-anchor">#</a> 选择器</h2> <h3 id="常用选择器"><a href="#常用选择器" class="header-anchor">#</a> 常用选择器</h3> <h4 id="_1-元素选择器"><a href="#_1-元素选择器" class="header-anchor">#</a> 1.元素选择器</h4> <blockquote><p>作用:  根据标签名选中指定的元素</p> <p>语法 : 标签名 {}</p> <p>例子: p{}  h1{} span{}</p> <p>缺点 指向不明确 容易造成样式污染</p></blockquote> <h4 id="_2-id选择器"><a href="#_2-id选择器" class="header-anchor">#</a> 2.id选择器</h4> <blockquote><p>作用:根据一个元素的id属性去选中一个元素</p> <p>语法:#id属性值{}</p> <p>例子: #box #yunmu</p></blockquote> <h4 id="_3-class类选择器"><a href="#_3-class类选择器" class="header-anchor">#</a> 3.class类选择器</h4> <blockquote><p>作用:根据元素的class属性值选中一组元素</p> <p>语法:.class属性值{}</p></blockquote> <h4 id="_4-通配符选择器"><a href="#_4-通配符选择器" class="header-anchor">#</a> 4..通配符选择器</h4> <blockquote><p>作用:选中页面所有标签</p> <p>(比较多的作用消除默认样式)</p> <p>语法 * {}</p> <p>缺点:选中所有元素,性能浪费,不建议使用</p></blockquote> <h3 id="复合选择器"><a href="#复合选择器" class="header-anchor">#</a> 复合选择器</h3> <h4 id="_1-交集选择器"><a href="#_1-交集选择器" class="header-anchor">#</a> 1.交集选择器</h4> <blockquote><p>作用:同时选中多个条件的元素</p> <p>语法:选择器1选择器2选择器3选择器n{}</p> <p><strong>注意:</strong></p> <p>​		交集选择器如果有元素选择器,必须使用元素选择器开头</p></blockquote> <h4 id="_2-并集选择器"><a href="#_2-并集选择器" class="header-anchor">#</a> 2.并集选择器</h4> <blockquote><p>作用:同时选择多个元素对应的元素</p> <p>语法:选择器1 , 选择器 2 , 选择器3 , 选择器n{}</p></blockquote> <h3 id="元素关系选择器"><a href="#元素关系选择器" class="header-anchor">#</a> 元素关系选择器</h3> <blockquote><p>就是当前元素根据与其他元素的关系选择元素的选择器</p> <p>主要是为了减少命名</p></blockquote> <p><strong>元素关系</strong></p> <blockquote><p><strong>父元素</strong></p> <p>​			---直接包含子元素的元素叫做父元素</p> <p><strong>子元素</strong></p> <p>​			---直接被父元素包含的元素是子元素</p> <p><strong>祖先元素</strong></p> <p>​			----直接或间接后代元素的元素叫祖先元素
​				 一个元素的父元素也是它的祖先元素</p> <p><strong>后代元素</strong></p> <p>​			----直接或间接被祖先元素包含的元素叫做后代元素</p> <p>​			----子元素也是后代元素</p> <p><strong>兄弟元素</strong></p> <p>​			----拥有相同父元素的元素是兄弟元素</p></blockquote> <h4 id="_1-子元素选择器"><a href="#_1-子元素选择器" class="header-anchor">#</a> 1.子元素选择器</h4> <blockquote><p>作用:选中指定父元素的指定子元素</p> <p>语法: 父元素 &gt; 子元素   用 &gt; 表示</p></blockquote> <h4 id="_2-后代元素选择器"><a href="#_2-后代元素选择器" class="header-anchor">#</a> 2.后代元素选择器</h4> <blockquote><p>选中指定元素的所有后代元素</p> <p>语法: 祖先 后代  用空格表示</p></blockquote> <h4 id="_3-相邻选择器"><a href="#_3-相邻选择器" class="header-anchor">#</a> 3.相邻选择器</h4> <blockquote><p>选中下一个兄弟</p> <p>语法:前一个 + 下一个  用+连接</p></blockquote> <h4 id="_4-通用兄弟选择器"><a href="#_4-通用兄弟选择器" class="header-anchor">#</a> 4.通用兄弟选择器</h4> <blockquote><p>选择下边所有兄弟(除开自己)</p> <p>语法 : 兄 ~ 弟</p></blockquote> <h2 id="样式优先级"><a href="#样式优先级" class="header-anchor">#</a> 样式优先级</h2> <blockquote><p>当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就有<strong>样式冲突</strong></p> <p>发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定</p></blockquote> <p>选择器的权重</p> <blockquote><p>行内样式   ---  1,0,0,0</p> <p>id选择器    ---  0,1,0,0</p> <p>类名选择器class    --- 0,0,1,0</p> <p>元素选择器div --- 0,0,0,1</p> <p>通配符，关系选择器  ---  0,0,0,0</p> <p>继承的样式  ---   没有优先级</p></blockquote> <blockquote><p>（分组选择器的优先级单独计算）</p> <p><strong>注意:</strong></p> <p>​			选择器的累加不会超过他所在的层级</p> <p>如果优先级计算后相同，则后面的样式生效</p> <p>可以在某一个样式后面加!important，则此时该样式会获取到最高的优先级</p> <p><strong>注意:</strong></p> <p>​			在开发中慎用！</p></blockquote> <p>​</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/html/11-表单.html" class="prev">
        表单元素
      </a></span> <span class="next"><a href="/./guide/notes/css/04-盒模型.html">
        02-CSS盒模型
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/18.2c077020.js" defer></script>
  </body>
</html>
